<template>
  <div>
    <el-form :inline="true" :model="queryParams" ref="queryParams" class="demo-form-inline">
      <el-form-item label="字典名称">
        <el-input v-model="queryParams.dictName" placeholder="请输入字典名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="字典类型">
        <el-input v-model="queryParams.dictType" placeholder="请输入字典类型" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryParams.status" placeholder="字典状态">
          <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in dictDataList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
            v-model="dataRange"
            type="datetimerange"
            value-format="yyyy-MM-dd"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="resetQueryParams">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button @click="handleAdd" icon="el-icon-plus" type="primary" size="small">新增</el-button>
    <el-button @click="handleDelByIds" icon="el-icon-delete" type="primary" size="small" :disabled="flag">删除</el-button>
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="dictId"
          label="字典编号">
      </el-table-column>
      <el-table-column
          prop="dictName"
          label="字典名称">
      </el-table-column>
      <el-table-column
          label="字典类型">
        <template v-slot="scope">
          <router-link :to="'/dictData?dictId='+scope.row.dictId" class="dict_type">
            <span>{{scope.row.dictType}}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态">
        <template v-slot="scope">
          {{scope.row.status==0?'正常':'停用'}}
        </template>
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template v-slot="scope">
          <el-button @click="handleUpdate(scope.row.dictId)" type="text" size="small">修改</el-button>
          <el-button @click="handleDel(scope.row.dictId)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--    添加或修改弹出对话框-->
    <el-dialog :title="title" :visible.sync="openDialog">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="字典名称" :label-width="formLabelWidth" prop="dictName">
          <el-input v-model="form.dictName"></el-input>
        </el-form-item>
        <el-form-item label="字典名称" :label-width="formLabelWidth" prop="dictType">
          <el-input v-model="form.dictType"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio-group v-model="form.status">
            <el-radio :label="item.dictValue" v-for="item in dictDataList">{{item.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="openDialog=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "DictTypeList",
  data(){
    return{
      //查询列表 表单参数
      queryParams:{
        beginTime:'',
        endTime:''
      },
      tableData:[],
      //日期时间选择器 区间值
      dataRange:[],
      //每页条数
      size:10,
      //当前页数
      current:1,
      //总页数
      total:0,
      //选中记录的id字符串
      ids:'',
      flag:true,
      //添加或修改 弹出对话框标题
      title:'',
      //对话框状态
      openDialog:false,
      //对话框嵌套表单宽度
      formLabelWidth:'120px',
      //添加或修改表单对象
      form:{},
      //添加或修改表单正则
      rules: {
        dictName: [
          {required: true, message: '请输入字典名称', trigger: 'blur'}
        ],
        dictType: [
          {required: true, message: '请输入字典类型', trigger: 'blur'}
        ]
      },
      dictDataList:[]
    }
  },methods:{
    resetQueryParams(){
      this.dataRange=[]
      this.queryParams={}
      this.search()
    },
    // 表单提交按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.form.dictId==undefined){
            this.axios.post("/dict/dict/type/saveDictType",this.form).then(res=>{
              if(res.data.flag){
                this.$message.success("添加成功")
              }else {
                this.$message.error("添加失败")
              }
            })
          }else {
            this.axios.post("/dict/dict/type/updateDictType",this.form).then(res=>{
              if(res.data.flag){
                this.$message.success("修改成功")
              }else {
                this.$message.error("修改失败")
              }
            })
          }
          this.openDialog=false
          this.search()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //清除校验表单内容
    resetForm(formName) {
      if(this.$refs[formName]){
        this.$refs[formName].resetFields();
      }
    },
    // 表单重置
    reset() {
      this.form = {
        dictId: undefined,
        dictName: undefined,
        dictType: undefined,
        status: "0",
        remark: undefined
      }
      this.resetForm("ruleForm");
    },
    handleAdd(){
      this.openDialog=true
      this.reset()
      this.title='新增字典类型'
    },
    handleUpdate(id){
      this.openDialog=true
      this.reset()
      this.title='修改字典类型'
      this.axios.get("/dict/dict/type/getById/"+id).then(res=>{
        this.form=res.data.data
      })
    },
    /**
     * 批量删除
     */
    handleDelByIds(){
      this.$confirm('此操作将永久删除编号为"'+this.ids+'"的数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get("/dict/dict/type/delByIds/"+this.ids).then(res=>{
          if(res.data.flag){
            this.$message.success("删除成功")
            this.search()
          }else {
            this.$message.error("删除失败")
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleDel(id){
      this.$confirm('此操作将永久删除编号为"'+id+'"的数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get("/dict/dict/type/delById/"+id).then(res=>{
          if(res.data.flag){
            this.$message.success("删除成功")
            this.search()
          }else {
            this.$message.error("删除失败")
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    search(){
      if(null!=this.dataRange && ''!=this.dataRange){
        this.queryParams.beginTime=this.dataRange[0]
        this.queryParams.endTime=this.dataRange[1]
      }
      this.axios.post("/dict/dict/type/list?size="+this.size+"&current="+this.current,this.queryParams).then(res=>{
        this.tableData=res.data.data.records
        this.total=res.data.data.total
      })
    },
    handleSelectionChange(selection) {
      this.ids=selection.map(item => item.dictId).join(",")
      this.flag=this.ids==''
    },
    handleSizeChange(size) {
      this.size=size
      this.search()
    },
    handleCurrentChange(page) {
      this.current=page
      this.search()
    }
  },created() {
    this.axios.get("/dict/dict/data/getDataByType?dictType=sys_normal_disable").then(res=>{
      this.dictDataList=res.data.data
    })
    this.search();
  }
}
</script>

<style scoped>
.dict_type{
  color: #337ab7;
  cursor: pointer;
  text-decoration: none;
}
</style>